<template>
  <div class="shop-detail">
    <!-- header -->
    <shop-header>商品详情</shop-header>
    <!-- banner -->
    <div>
      <img style="width:100%" v-lazy="detailInfo.mainImage">
    </div>
    <!-- 详情 -->
    <div class="detail-des">
      <div class="detail-des-amout">{{ detailInfo.amount }}福豆</div>
      <h3>{{ detailInfo.productName }}</h3>
      <p>{{ detailInfo.remark }}</p>
      <p class="shipping">运费: 0</p>
    </div>

    <div>
      <div style="text-align: center;font-weight: bold;padding: 12px">图文详情</div>
      <img style="width:100%" v-for="item in detailInfo.detailImages" v-lazy="item">
    </div>

    <mt-popup
        v-model="popupVisible"
        position="bottom"
    >
      <div class="popup-box">
        <div>
          <div class="close-btn" @click="close">
            <img src="../assets/close.png" />
          </div>
          <div class="popup-info">
            <div class="popup-info-img">
              <img v-lazy="detailInfo.mainImage"/>
            </div>
            <div>
              <h4>{{ detailInfo.productName }}</h4>
              <p>{{ detailInfo.amount }}福豆</p>
            </div>
          </div>
          <div class="popup-calculation">
            <div class="popup-calculation-cont">
              <h4>购买数量:</h4>
              <p>剩余100000件</p>
            </div>
            <div class="popup-calculation-btn">
              <div @click="rm">-</div>
              <div>{{ nums }}</div>
              <div @click="add">+</div>
            </div>
          </div>
        </div>
      </div>
    </mt-popup>
    <!-- 兑换按钮 -->
    <div class="detail-button" @click="exchange">立即兑换</div>
  </div>
</template>

<script>
import Header from '../components/header';
import request from "../utils/request";
import {Indicator} from "mint-ui";
export default {
  components: {
    shopHeader: Header,
  },
  data () {
    return {
      detailInfo: {},
      popupVisible: false,
      nums: 1
    }
  },
  async created() {
    let id = this.$route.query.id;
    Indicator.open();
    const res = await request({id: id}, "/ajax/product/load");
    if(res && res.code == 0){
      Indicator.close();
      this.detailInfo = res.data;
    }
  },
  methods: {
    exchange() {
      if (this.popupVisible) {
        this.$router.push({
          path: '/confirm',
          query: {
            id: this.detailInfo.id,
            num: this.nums
          }
        });
      } else {
        this.popupVisible = true;
      }
    },
    close () {
      this.popupVisible = false;
    },
    rm () {
      if(this.nums === 1) {
        return false;
      }
      this.nums -= 1;
    },
    add () {
      this.nums += 1;
    }
  },
}
</script>

<style scoped>
h3,h4,p {
  margin: 0;
  padding: 0;
}
.shop-detail {

}
/* banner */
.banner-box {
  width: 100%;
  height: 200px;
}
.mint-swipe-item > img {
  width: 100%;
  height: 100%;
}
/*详情*/
.detail-des {
  padding: 0 15px 10px 15px;
  text-align: left;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.detail-des-amout {
  padding: 10px 0;
  color: #E2778A;
  border-bottom: 1px solid #ccc;
  font-size: 20px;
}
.detail-des > h3 {
  padding: 10px 0;
  margin: 0;
}
.shipping {
  margin-top: 5px;
  color: #E2778A;
}
/*兑换按钮*/
.detail-button {
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #fff;
  background-color: #EB544D;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9999;
}
/*弹出窗*/
.mint-popup-bottom {
  bottom: 50px;
}
.popup-box {
  width: 100vw;
  background-color: #fff;
  padding: 15px 0;
  padding-left: 4%;
}
.popup-box > div {
  position: relative;
}
.close-btn {
  position: absolute;
  top: -5px;
  right: 15px;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.close-btn > img {
  width: 50%;
  display: block;
}
.popup-info {
  width: 96%;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.popup-info-img {
  width: 23%;
}
.popup-info-img > img{
  width: 100%;
  display: block;
}
.popup-info-img + div {
  flex: 1;
  text-align: left;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 14px;
}
.popup-info-img ~ div > p{
  color: red;
  margin-top: 10px;
}

.popup-calculation {
  width: 96%;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding: 15px 0;
}
.popup-calculation-cont {
  width: 50%;
  font-size: 14px;
  text-align: left;
}
.popup-calculation-cont > p{
  margin-top: 5px;
}
.popup-calculation-btn {
  width: 90px;
  height: 20px;
  display: flex;
  border: 1px solid #ccc;
  border-right: 0;
  margin-right: 20px;
}
.popup-calculation-btn > div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #ccc;
}

</style>
